<template>
  <div class="axiom-playground-layout">
    <!-- Main Content Area -->
    <div class="playground-main">
      <header v-if="$slots.header" class="playground-main__header">
        <slot name="header"></slot>
      </header>
      <main class="playground-main__content">
        <slot></slot>
      </main>
      <footer v-if="$slots.footer" class="playground-main__footer">
        <slot name="footer"></slot>
      </footer>
    </div>

    <!-- Sidebar Area -->
    <template v-if="isSidebarVisible">
      <div class="playground-resizer" @mousedown="startResize"></div>
      <aside class="playground-sidebar" :style="{ width: `${sidebarWidth}px` }">
        <header v-if="$slots['sidebar-header']" class="playground-sidebar__header">
          <slot name="sidebar-header"></slot>
        </header>
        <main class="playground-sidebar__content">
          <slot name="sidebar-content"></slot>
        </main>
        <footer v-if="$slots['sidebar-footer']" class="playground-sidebar__footer">
          <slot name="sidebar-footer"></slot>
        </footer>
      </aside>
    </template>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  sidebarVisible: {
    type: Boolean,
    default: true,
  },
  initialSidebarWidth: {
    type: Number,
    default: 300,
  },
  minSidebarWidth: {
    type: Number,
    default: 200,
  },
  maxSidebarWidth: {
    type: Number,
    default: 800,
  },
});

const emit = defineEmits(['update:sidebarVisible']);

const isSidebarVisible = ref(props.sidebarVisible);
const sidebarWidth = ref(props.initialSidebarWidth);
const isResizing = ref(false);

watch(() => props.sidebarVisible, (newValue) => {
  isSidebarVisible.value = newValue;
});

function startResize(event) {
  isResizing.value = true;
  const startX = event.clientX;
  const startWidth = sidebarWidth.value;

  const handleMouseMove = (moveEvent) => {
    if (!isResizing.value) return;
    const dx = startX - moveEvent.clientX;
    let newWidth = startWidth + dx;
    
    if (newWidth < props.minSidebarWidth) newWidth = props.minSidebarWidth;
    if (newWidth > props.maxSidebarWidth) newWidth = props.maxSidebarWidth;
    
    sidebarWidth.value = newWidth;
  };

  const handleMouseUp = () => {
    isResizing.value = false;
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
    document.body.style.cursor = '';
    document.body.style.userSelect = '';
  };

  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
  document.body.style.cursor = 'col-resize';
  document.body.style.userSelect = 'none';
}
</script>

<style lang="scss">
@use '../../styles/components/pc/axiom-playground-layout';
</style> 